
import React, { Fragment } from 'react';
import { Route, Switch, useLocation, useHistory } from 'react-router-dom';
import { TabBar } from 'antd-mobile';
import Home from '../Home';
import My from '../My';
import Found from '../Found';
import styles from './style.module.scss'
import { tabBarList } from '../../constans/Index';

export default function Index() {
  const location = useLocation();
  const history = useHistory()
  return <Fragment >
    <div className={styles.container}>
      <Switch >
        <Route exact path='/home' component={Home} >
        </Route>
        <Route path='/home/list' component={Found} />
        <Route path='/home/profile' component={My} />
      </Switch>
    </div>
    <div className={styles.footer}>

      <TabBar
        unselectedTintColor="#949494"
        tintColor="#21B97A"
        barTintColor="white"
      >{
          tabBarList.map(v => {
            const { title, key, pathname, selectedIcon, icon } = v
            return <TabBar.Item title={title} key={key} selected={location.pathname === pathname} onPress={() => history.push(pathname)}
              icon={<i className={icon}> </i>} selectedIcon={<i className={selectedIcon}></i>} />
          })
        }
      </TabBar> </div>
  </Fragment>
}